<template>
    <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
                <a-row :gutter="24">
                    <a-col :lg="7" :md="8" :sm="24" :xl="6">
                        <a-form-item label="车牌号">
                            <j-input v-model="queryParam.plateNo" placeholder="请输入车牌号"></j-input>
                        </a-form-item>
                    </a-col>
                    <a-col :lg="7" :md="8" :sm="24" :xl="6">
                        <a-form-item label="审核状态">
                            <j-dict-select-tag v-model="queryParam.auditStatus" placeholder="请选择审核状态"
                                dictCode="	auditStatus" />
                        </a-form-item>
                    </a-col>
                    <template v-if="toggleSearchStatus">
                        <a-col :lg="7" :md="8" :sm="24" :xl="6">
                            <a-form-item label="司机姓名">
                                <a-input v-model="queryParam.driverName" placeholder="请输入司机姓名"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :lg="7" :md="8" :sm="24" :xl="6">
                            <a-form-item label="手机号">
                                <a-input v-model="queryParam.phoneNum" placeholder="请输入手机号"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :lg="7" :md="8" :sm="24" :xl="6">
                            <a-form-item label="车队">
                                <a-input v-model="queryParam.fleet" placeholder="请输入车队"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :lg="7" :md="8" :sm="24" :xl="6">
                            <a-form-item label="检验人员姓名">
                                <a-input v-model="queryParam.surveyorName" placeholder="请输入检验人员姓名"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :lg="11" :md="12" :sm="24" :xl="10">
                            <a-form-item label="上次清洗时间">
                                <j-date v-model="queryParam.lastTimeCleaningDate_begin" :show-time="true"
                                    class="query-group-cust" date-format="YYYY-MM-DD HH:mm:ss"
                                    placeholder="请选择开始时间"></j-date>
                                <span class="query-group-split-cust"></span>
                                <j-date v-model="queryParam.lastTimeCleaningDate_end" :show-time="true"
                                    class="query-group-cust" date-format="YYYY-MM-DD HH:mm:ss"
                                    placeholder="请选择结束时间"></j-date>
                            </a-form-item>
                        </a-col>
                        <a-col :lg="11" :md="12" :sm="24" :xl="10">
                            <a-form-item label="入场时间">
                                <j-date v-model="queryParam.entryTime_begin" :show-time="true" class="query-group-cust"
                                    date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间"></j-date>
                                <span class="query-group-split-cust"></span>
                                <j-date v-model="queryParam.entryTime_end" :show-time="true" class="query-group-cust"
                                    date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间"></j-date>
                            </a-form-item>
                        </a-col>
                        <a-col :lg="11" :md="12" :sm="24" :xl="10">
                            <a-form-item label="出场时间">
                                <j-date v-model="queryParam.exitTime_begin" :show-time="true" class="query-group-cust"
                                    date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间"></j-date>
                                <span class="query-group-split-cust"></span>
                                <j-date v-model="queryParam.exitTime_end" :show-time="true" class="query-group-cust"
                                    date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间"></j-date>
                            </a-form-item>
                        </a-col>
                        <a-col :lg="11" :md="12" :sm="24" :xl="10">
                            <a-form-item label="审核时间">
                                <j-date v-model="queryParam.auditDate_begin" :show-time="true" class="query-group-cust"
                                    date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间"></j-date>
                                <span class="query-group-split-cust"></span>
                                <j-date v-model="queryParam.auditDate_end" :show-time="true" class="query-group-cust"
                                    date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间"></j-date>
                            </a-form-item>
                        </a-col>
                        <a-col :lg="11" :md="12" :sm="24" :xl="10">
                            <a-form-item label="检验时间">
                                <j-date v-model="queryParam.surveyorDate_begin" :show-time="true"
                                    class="query-group-cust" date-format="YYYY-MM-DD HH:mm:ss"
                                    placeholder="请选择开始时间"></j-date>
                                <span class="query-group-split-cust"></span>
                                <j-date v-model="queryParam.surveyorDate_end" :show-time="true" class="query-group-cust"
                                    date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间"></j-date>
                            </a-form-item>
                        </a-col>
                    </template>
                    <a-col :lg="7" :md="8" :sm="24" :xl="6">
                        <span class="table-page-search-submitButtons" style="float: left;overflow: hidden;">
                            <a-button icon="search" type="primary" @click="searchQuery">查询</a-button>
                            <a-button icon="reload" style="margin-left: 8px" type="primary"
                                @click="searchReset">重置</a-button>
                            <a style="margin-left: 8px" @click="handleToggleSearch">
                                {{ toggleSearchStatus ? '收起' : '展开' }}
                                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                            </a>
                        </span>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <!-- 查询区域-END -->

        <!-- 操作按钮区域 -->
        <div class="table-operator">
            <a-button icon="plus" type="primary" @click="handleAdd">新增</a-button>
            <a-button icon="download" type="primary" @click="handleExportXls('罐车登记表')">导出</a-button>
            <a-upload :action="importExcelUrl" :headers="tokenHeader" :multiple="false" :showUploadList="false"
                name="file" @change="handleImportExcel">
                <a-button icon="import" type="primary">导入</a-button>
            </a-upload>
            <!-- 高级查询区域 -->
            <j-super-query ref="superQueryModal" :fieldList="superFieldList"
                @handleSuperQuery="handleSuperQuery"></j-super-query>
            <a-dropdown v-if="selectedRowKeys.length > 0" v-has="'tanker:del'">
                <a-menu slot="overlay">
                    <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
                </a-menu>
                <a-button style="margin-left: 8px"> 批量操作
                    <a-icon type="down" />
                </a-button>
            </a-dropdown>
            <div class="table-page-search-wrapper">
                <a-form layout="inline">
                    <a-row :gutter="24" style="display: grid;justify-content: end;">
                        <a-col :lg="7" :md="8" :sm="24" :xl="6">
                            <a-form-item label="查询GPS时间范围" style="width: 500px;">
                                <j-date v-model="GPSbegin" :show-time="true" class="query-group-cust"
                                    date-format="YYYY-MM-DD" placeholder="请选择开始时间"></j-date>
                                <span class="query-group-split-cust"></span>72小时内
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
        </div>

        <!-- table区域-begin -->
        <div>
            <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
                <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
                    selectedRowKeys.length }}</a>项
                <a style="margin-left: 24px" @click="onClearSelected">清空</a>
            </div>

            <a-table ref="table" :columns="columns" :dataSource="dataSource" :loading="loading"
                :pagination="ipagination" :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                :scroll="{ x: true }" bordered class="j-table-force-nowrap" rowKey="id" size="middle"
                @change="handleTableChange">

                <span slot="auditStatus" slot-scope="text">
                    <a-tag v-if="text == 1" color="geekblue">新登记</a-tag>
                    <a-tag v-if="text == 2" color="green">入场前检验通过</a-tag>
                    <a-tag v-if="text == 3" color="volcano">三载审核驳回</a-tag>
                    <a-tag v-if="text == 4" color="orange">三载审核待确认</a-tag>
                    <a-tag v-if="text == 5" color="green">品质经理通过</a-tag>
                    <a-tag v-if="text == 5" color="orange">业务经理未通过</a-tag>
                    <a-tag v-if="text == 6" color="orange">品质经理未通过</a-tag>
                    <a-tag v-if="text == 6" color="green">业务经理通过</a-tag>
                    <a-tag v-if="text == 7" color="green">品质经理通过</a-tag>
                    <a-tag v-if="text == 7" color="green">业务经理通过</a-tag>
                    <a-tag v-if="text == 8" color="green">验罐合格</a-tag>
                    <a-tag v-if="text == 9" color="volcano">验罐不合格</a-tag>
                    <a-tag v-if="text == 10" color="orange">验罐待确定</a-tag>
                    <a-tag v-if="text == 11" color="green">已铅封</a-tag>
                    <a-tag v-if="text == 12" color="volcano">已废弃</a-tag>
                    <a-tag v-if="text == 13" color="volcano">已过期</a-tag>
                    <a-tag v-if="text == 14" color="#444">黑名单</a-tag>
                    <a-tag v-if="text == 15" color="green">三载通过待拍照</a-tag>
                    <a-tag v-if="text == 16" color="green">已完成</a-tag>
                </span>
                <template slot="plateNo" slot-scope="text, record">
                    <div v-html="text" v-if="record.lastUnqualifiedMark == 1" style="color: orange;"></div>
                    <div v-html="text" v-else></div>
                </template>

                <template slot="htmlSlot" slot-scope="text">
                    <div v-html="text"></div>
                </template>
                <template slot="imgSlot" slot-scope="text">
                    <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
                    <viewer :options="options" v-else class="viewer" ref="viewer">
                        <img src="../../assets/yulan.png" :data-source="getImgView(text)" height="25px" alt=""
                            style="max-width: 80px; font-size: 12px; font-style: italic" />
                    </viewer>
                </template>
                <template slot="fileSlot" slot-scope="text">
                    <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
                    <a-button v-else :ghost="true" icon="download" size="small" type="primary"
                        @click="downloadFile(text)">
                        下载
                    </a-button>
                </template>
                <span slot="driverVideo" slot-scope="text">
                    <template v-if="text != null">
                        <a @click="playVideo(text)">
                            <svg t="1672388588867" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="2538" width="20" height="20">
                                <path
                                    d="M512 64c126.72 3.328 232.192 47.168 316.48 131.456C912.832 279.872 956.672 385.344 960 512c-3.328 126.72-47.168 232.192-131.52 316.48C744.192 912.832 638.72 956.672 512 960c-126.72-3.328-232.192-47.168-316.544-131.52C111.232 744.192 67.392 638.72 64 512c3.328-126.72 47.168-232.192 131.456-316.544C279.872 111.232 385.344 67.392 512 64z m0 832c108.672-2.688 199.168-40.192 271.488-112.512S893.312 620.672 896 512c-2.688-108.672-40.192-199.168-112.512-271.488S620.672 130.688 512 128c-108.672 2.688-199.168 40.192-271.488 112.512S130.688 403.328 128 512c2.688 108.672 40.192 199.168 112.512 271.488S403.328 893.312 512 896z m-48-248L668.992 512 464 376v272z m11.008-341.952l248.96 165.952a46.848 46.848 0 0 1 21.056 40.064c0 16.64-7.04 29.952-21.056 40l-248.96 166.016a47.936 47.936 0 0 1-24.96 8.448 45.248 45.248 0 0 1-24.512-6.016 51.84 51.84 0 0 1-18.56-17.472 45.76 45.76 0 0 1-6.976-24.96V346.048a45.44 45.44 0 0 1 7.04-24.96 52.16 52.16 0 0 1 18.432-17.536c7.68-4.352 15.872-6.4 24.576-6.016 8.64 0.32 16.96 3.2 24.96 8.512z"
                                    fill="#0ebaaa" p-id="2539">
                                </path>
                            </svg>
                        </a>
                    </template>
                    <template v-else>
                        <svg t="1672388588867" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2538" width="20" height="20">
                            <path
                                d="M512 64c126.72 3.328 232.192 47.168 316.48 131.456C912.832 279.872 956.672 385.344 960 512c-3.328 126.72-47.168 232.192-131.52 316.48C744.192 912.832 638.72 956.672 512 960c-126.72-3.328-232.192-47.168-316.544-131.52C111.232 744.192 67.392 638.72 64 512c3.328-126.72 47.168-232.192 131.456-316.544C279.872 111.232 385.344 67.392 512 64z m0 832c108.672-2.688 199.168-40.192 271.488-112.512S893.312 620.672 896 512c-2.688-108.672-40.192-199.168-112.512-271.488S620.672 130.688 512 128c-108.672 2.688-199.168 40.192-271.488 112.512S130.688 403.328 128 512c2.688 108.672 40.192 199.168 112.512 271.488S403.328 893.312 512 896z m-48-248L668.992 512 464 376v272z m11.008-341.952l248.96 165.952a46.848 46.848 0 0 1 21.056 40.064c0 16.64-7.04 29.952-21.056 40l-248.96 166.016a47.936 47.936 0 0 1-24.96 8.448 45.248 45.248 0 0 1-24.512-6.016 51.84 51.84 0 0 1-18.56-17.472 45.76 45.76 0 0 1-6.976-24.96V346.048a45.44 45.44 0 0 1 7.04-24.96 52.16 52.16 0 0 1 18.432-17.536c7.68-4.352 15.872-6.4 24.576-6.016 8.64 0.32 16.96 3.2 24.96 8.512z"
                                fill="#bdbfbf" p-id="2539"></path>
                        </svg>
                    </template>
                </span>
                <span slot="action" slot-scope="text, record">
                    <a v-has="'tanker:edit'" @click="handleEdit(record)">编辑</a>
                    <a-divider v-has="'tanker:edit'" type="vertical" />
                    <a @click="showGPS(record)">查看gps</a>
                    <a-divider type="vertical" />
                    <a @click="inCar(record)" v-show="record.entryStatus == 1" v-has="'tanker:super'">入场</a>
                    <a-divider type="vertical" v-show="record.entryStatus == 1" v-has="'tanker:super'" />
                    <a @click="outCar(record)" v-show="record.entryStatus == 2" v-has="'tanker:super'">出场</a>
                    <a-divider type="vertical" v-show="record.entryStatus == 2" v-has="'tanker:super'" />

                    <a-popconfirm title="黑名单车辆，确定允许审批吗?" @confirm="() => allow(record)"
                        v-show="record.auditStatus == 14" v-has="'tanker:black'">
                        <a>允许审批</a>
                        <a-divider type="vertical" v-show="record.auditStatus == 14" v-has="'tanker:black'" />
                    </a-popconfirm>
                    <a v-show="record.auditStatus == 1" @click="handleCheck(record)" v-has="'tanker:audit'">审批</a>
                    <a v-show="record.auditStatus == 4 || record.auditStatus == 6" @click="handleCheck(record)"
                        v-has="'tanker:quality'">审批</a>
                    <a v-show="record.auditStatus == 4 || record.auditStatus == 5" @click="handleCheck(record)"
                        v-has="'tanker:business'">审批</a>
                    <a-divider type="vertical" v-show="record.auditStatus == 1" v-has="'tanker:audit'" />
                    <a-divider type="vertical" v-show="record.auditStatus == 4 || record.auditStatus == 6"
                        v-has="'tanker:quality'" />
                    <a-divider type="vertical" v-show="record.auditStatus == 4 || record.auditStatus == 5"
                        v-has="'tanker:business'" />
                    <a @click="showSteps(record)">查看流程</a>
                    <a-divider type="vertical" />
                    <a-dropdown>
                        <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
                        <a-menu slot="overlay">
                            <a-menu-item>
                                <a @click="handleDetail(record)">详情</a>
                            </a-menu-item>
                            <a-menu-item v-has="'tanker:del'">
                                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                                    <a>删除</a>
                                </a-popconfirm>
                            </a-menu-item>
                            <a-menu-item v-has="'tanker:abandon'">
                                <a-popconfirm title="确定废弃吗?" @confirm="() => discard(record)">
                                    <a>废弃数据</a>
                                </a-popconfirm>
                            </a-menu-item>
                        </a-menu>
                    </a-dropdown>
                </span>
            </a-table>
            <a-modal :confirm-loading="labelLoading" :visible="labelVisible" :width="1000" title="审批">
                <template slot="footer">
                    <a-button key="tongguo" :loading="loading" type="primary" @click="handleOk">
                        确认
                    </a-button>
                    <a-button key="back" @click="labelCancel">
                        取消
                    </a-button>
                </template>
                <a-form>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="车牌号">
                                <a-input v-model="form.plateNo" disabled placeholder="请输入车牌号"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="挂车号">
                                <a-input v-model="form.trailerNo" disabled placeholder="请输入挂车号"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="司机姓名">
                                <a-input v-model="form.driverName" disabled placeholder="请输入司机姓名"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="手机号">
                                <a-input v-model="form.phoneNum" disabled placeholder="请输入手机号"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="产品种类">
                                <a-input v-model="form.productionType" disabled placeholder="请输入产品种类"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="车队">
                                <a-input v-model="form.fleet" disabled placeholder="请输入车队"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="收货企业名称">
                                <a-input v-model="form.receiptCompany" disabled placeholder="请输入收货企业名称"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="是否有食用油专用标签">
                                <j-dict-select-tag v-model="form.isEdibleOilLabel" :trigger-change="true"
                                    dictCode="isEdibleOilLabel" placeholder="请选择是否有食用油专用标签" type="radio" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="健康证">
                                <j-image-upload v-model="form.healthCertificate" disabled isMultiple></j-image-upload>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="前一载卸货公司">
                                <a-input v-model="form.lastTimeUnloadingCompanyName1" disabled
                                    placeholder="请输入前一载卸货公司"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="前一载卸车货品名称">
                                <a-input v-model="form.lastTimeUnloadingGoodsName1" disabled
                                    placeholder="请输入前一载卸车货品名称"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="前一载卸货日期">
                                <j-date v-model="form.lastTimeUnloadingDate1" :show-time="true" :trigger-change="true"
                                    date-format="YYYY-MM-DD HH:mm:ss" disabled placeholder="请选择前一载卸货日期"
                                    style="width: 100%" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="前二载卸货公司">
                                <a-input v-model="form.lastTimeUnloadingCompanyName2" disabled
                                    placeholder="请输入前二载卸货公司"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="前二载卸车货品名称">
                                <a-input v-model="form.lastTimeUnloadingGoodsName2" disabled
                                    placeholder="请输入前二载卸车货品名称"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="前二载卸货日期">
                                <j-date v-model="form.lastTimeUnloadingDate2" :show-time="true" :trigger-change="true"
                                    date-format="YYYY-MM-DD HH:mm:ss" disabled placeholder="请选择前二载卸货日期"
                                    style="width: 100%" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="前三载卸货公司">
                                <a-input v-model="form.lastTimeUnloadingCompanyName3" disabled
                                    placeholder="请输入前三载卸货公司"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="前三载卸车货品名称">
                                <a-input v-model="form.lastTimeUnloadingGoodsName3" disabled
                                    placeholder="请输入前三载卸车货品名称"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="前三载卸货日期">
                                <j-date v-model="form.lastTimeUnloadingDate3" :show-time="true" :trigger-change="true"
                                    date-format="YYYY-MM-DD HH:mm:ss" disabled placeholder="请选择前三载卸货日期"
                                    style="width: 100%" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="三次卸货照片">
                                <j-image-upload v-model="form.lastTimeUnloadingPhotos" disabled
                                    isMultiple></j-image-upload>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="前三载证明文件">
                                <j-image-upload v-model="form.documentation" disabled isMultiple></j-image-upload>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="上次清洗时间">
                                <j-date v-model="form.lastTimeCleaningDate" :show-time="true" :trigger-change="true"
                                    date-format="YYYY-MM-DD HH:mm:ss" disabled placeholder="请选择上次清洗时间"
                                    style="width: 100%" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="上次清洗照片">
                                <j-image-upload v-model="form.lastTimeCleaningPhotos" disabled
                                    isMultiple></j-image-upload>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="清洗公司">
                                <a-input v-model="form.cleanCompany" disabled placeholder="清洗公司"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="车头拍照号照片">
                                <j-image-upload v-model="form.cleanPhoto1" disabled isMultiple></j-image-upload>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="挂车牌照号照片">
                                <j-image-upload v-model="form.cleanPhoto2" disabled isMultiple></j-image-upload>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="清罐场地照片">
                                <j-image-upload v-model="form.cleanPhoto3" disabled isMultiple></j-image-upload>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="人员着装照片">
                                <j-image-upload v-model="form.cleanPhoto4" disabled isMultiple></j-image-upload>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="作业场景照片">
                                <j-image-upload v-model="form.cleanPhoto5" disabled isMultiple></j-image-upload>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" label="司机签字">
                                <j-image-upload v-model="form.driverSign" disabled isMultiple></j-image-upload>
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="审批结果">
                                <a-radio-group v-model="auditStatus" @change="onChange">
                                    <a-radio-button :value="15" v-has="'tanker:audit'">
                                        通过
                                    </a-radio-button>
                                    <a-radio-button :value="5" v-has="'tanker:quality'" v-show="form.auditStatus == 4">
                                        通过
                                    </a-radio-button>
                                    <a-radio-button :value="6" v-has="'tanker:business'" v-show="form.auditStatus == 4">
                                        通过
                                    </a-radio-button>
                                    <a-radio-button :value="7" v-has="'tanker:quality'" v-show="form.auditStatus == 6">
                                        通过
                                    </a-radio-button>
                                    <a-radio-button :value="7" v-has="'tanker:business'" v-show="form.auditStatus == 5">
                                        通过
                                    </a-radio-button>
                                    <a-radio-button :value="3">
                                        驳回
                                    </a-radio-button>
                                    <a-radio-button :value="4" v-has="'tanker:audit'">
                                        待确认
                                    </a-radio-button>
                                </a-radio-group>
                            </a-form-item>
                        </a-col>
                        <a-col :span="24" v-if="remarks">
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="驳回原因">
                                <a-textarea v-model="form.remarks" placeholder="请输入驳回原因"
                                    :auto-size="{ minRows: 3, maxRows: 5 }" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </a-modal>
        </div>

        <a-modal v-model="playVideoVisible" title="播放视频" :width="800" @cancel="disposeVideo">
            <video width="100%" v-if="playVideoVisible" height="400" controls ref="videoPlayer">
                <source :src="getImgView(videoSrc)" type="video/mp4">
                <!-- <source :src="'上传视频Api地址' + videoSrc" type="video/mp4"> -->
            </video>
        </a-modal>

        <tanker-registration-modal ref="modalForm" @ok="modalFormOk"></tanker-registration-modal>
        <a-modal v-model="gpsShow" width="1200px" @ok="gpsClose"
            :title="registration.plateNo + formattedNow + '-' + formattedTomorrow + '车辆行驶路线'" ok-text="保存为图片"
            id="gpsModal" :confirm-loading="gpsModalLoading">
            <map-loader :trackArray="trackArray" :parkArray="parkedOverOneHourWithTimes" v-if="gpsShow"
                class="canvasImgObj"></map-loader>
        </a-modal>
        <a-modal v-model="stepsShow" width="1200px" @ok="stepsShow = false" title="流程图">
            <steps :current="current" :status="status"></steps>
        </a-modal>

    </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import TankerRegistrationModal from './modules/TankerRegistrationModal'
import { postAction } from "@api/manage";
import MapLoader from './mapLoader/MapLoader.vue';
import axios from 'axios';
import { putAction } from '../../api/manage'
import 'viewerjs/dist/viewer.css'
import html2canvas from 'html2canvas'
import steps from './Steps.vue'

export default {
    name: 'TankerRegistrationList',
    mixins: [JeecgListMixin, mixinDevice],
    components: {
        TankerRegistrationModal,
        MapLoader,
        steps,
    },
    data() {
        return {
            options: { url: 'data-source' },
            remarks: false,
            auditStatus: 0,
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
            },
            labelCol1: {
                xs: { span: 24 },
                sm: { span: 7 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
            form: {},
            labelVisible: false,
            labelLoading: false,
            description: '罐车登记表管理页面',
            // 表头
            columns: [
                {
                    title: '#',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 60,
                    align: "center",
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1;
                    }
                },
                {
                    title: '审核状态',
                    align: "center",
                    dataIndex: 'auditStatus',
                    scopedSlots: { customRender: 'auditStatus' },
                },
                {
                    title: '入场状态',
                    align: "center",
                    dataIndex: 'entryStatus_dictText'
                },
                {
                    title: '车牌号',
                    align: "center",
                    dataIndex: 'plateNo',
                    scopedSlots: { customRender: 'plateNo' },
                },
                {
                    title: '挂车号',
                    align: "center",
                    dataIndex: 'trailerNo'
                },
                {
                    title: '司机姓名',
                    align: "center",
                    dataIndex: 'driverName'
                },
                {
                    title: '手机号',
                    align: "center",
                    dataIndex: 'phoneNum'
                },
                {
                    title: '产品种类',
                    align: "center",
                    dataIndex: 'productionType'
                },
                {
                    title: '车队',
                    align: "center",
                    dataIndex: 'fleet'
                },
                {
                    title: '前一载卸货公司',
                    align: "center",
                    dataIndex: 'lastTimeUnloadingCompanyName1'
                },
                {
                    title: '前一载卸车货品名称',
                    align: "center",
                    dataIndex: 'lastTimeUnloadingGoodsName1'
                },
                {
                    title: '前一载卸货日期',
                    align: "center",
                    dataIndex: 'lastTimeUnloadingDate1',
                    customRender: function (t, r, index) {
                        return t ? t.substring(0, 10) : "";
                    }
                },
                {
                    title: '前二载卸货公司',
                    align: "center",
                    dataIndex: 'lastTimeUnloadingCompanyName2'
                },
                {
                    title: '前二载卸车货品名称',
                    align: "center",
                    dataIndex: 'lastTimeUnloadingGoodsName2'
                },
                {
                    title: '前二载卸货日期',
                    align: "center",
                    dataIndex: 'lastTimeUnloadingDate2',
                    customRender: function (t, r, index) {
                        return t ? t.substring(0, 10) : "";
                    }
                },
                {
                    title: '前三载卸货公司',
                    align: "center",
                    dataIndex: 'lastTimeUnloadingCompanyName3'
                },
                {
                    title: '前三载卸车货品名称',
                    align: "center",
                    dataIndex: 'lastTimeUnloadingGoodsName3'
                },
                {
                    title: '前三载卸货日期',
                    align: "center",
                    dataIndex: 'lastTimeUnloadingDate3',
                    customRender: function (t, r, index) {
                        return t ? t.substring(0, 10) : "";
                    }
                },
                {
                    title: '三次卸货照片',
                    align: "center",
                    dataIndex: 'lastTimeUnloadingPhotos',
                    scopedSlots: { customRender: 'imgSlot' }
                },
                {
                    title: '前三载证明文件',
                    align: "center",
                    dataIndex: 'documentation',
                    scopedSlots: { customRender: 'imgSlot' }
                },
                {
                    title: '上次清洗时间',
                    align: "center",
                    dataIndex: 'lastTimeCleaningDate',
                    customRender: function (t, r, index) {
                        return t ? t.substring(0, 10) : "";
                    }
                },
                {
                    title: '上次清洗证明',
                    align: "center",
                    dataIndex: 'lastTimeCleaningPhotos',
                    scopedSlots: { customRender: 'imgSlot' }
                },
                {
                    title: '司机签字',
                    align: "center",
                    dataIndex: 'driverSign',
                    scopedSlots: { customRender: 'imgSlot' }
                },
                {
                    title: '司机承诺视频',
                    align: 'center',
                    dataIndex: 'driverVideo',
                    scopedSlots: { customRender: 'fileSlot' },
                },
                {
                    title: '入场时间',
                    align: "center",
                    dataIndex: 'entryTime'
                },
                {
                    title: '入场照片',
                    align: "center",
                    dataIndex: 'entryPic',
                    scopedSlots: { customRender: 'imgSlot' }
                },
                {
                    title: '出场时间',
                    align: "center",
                    dataIndex: 'exitTime'
                },
                {
                    title: '出场照片',
                    align: "center",
                    dataIndex: 'exitPic',
                    scopedSlots: { customRender: 'imgSlot' }
                },
                {
                    title: '车辆正面斜45度照片',
                    align: "center",
                    dataIndex: 'vehicle45Photo',
                    scopedSlots: { customRender: 'imgSlot' }
                },
                {
                    title: '罐内照片',
                    align: "center",
                    dataIndex: 'tankPhoto',
                    scopedSlots: { customRender: 'imgSlot' }
                },
                {
                    title: '卸油口照片',
                    align: "center",
                    dataIndex: 'oilDischargePortPhoto',
                    scopedSlots: { customRender: 'imgSlot' }
                },
                {
                    title: '随车装运记录表',
                    align: "center",
                    dataIndex: 'onboardRecordForm',
                    scopedSlots: { customRender: 'imgSlot' }
                },

                {
                    title: '重量(吨)',
                    align: "center",
                    dataIndex: 'weight'
                },
                {
                    title: '收货企业名称',
                    align: "center",
                    dataIndex: 'receiptCompany'
                },
                {
                    title: '登记时间',
                    align: "center",
                    dataIndex: 'registerDate'
                },
                {
                    title: '审核时间',
                    align: "center",
                    dataIndex: 'auditDate'
                },
                {
                    title: '检验时间',
                    align: "center",
                    dataIndex: 'surveyorDate'
                },
                {
                    title: 'gps截图',
                    align: "center",
                    dataIndex: 'screenshot',
                    scopedSlots: { customRender: 'imgSlot' }
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: "center",
                    fixed: "right",
                    width: 147,
                    scopedSlots: { customRender: 'action' }
                }
            ],
            url: {
                list: "/tankerRegistration/tankerRegistration/list",
                edit: "/tankerRegistration/tankerRegistration/edit",
                delete: "/tankerRegistration/tankerRegistration/delete",
                deleteBatch: "/tankerRegistration/tankerRegistration/deleteBatch",
                check: "/tankerRegistration/tankerRegistration/check",
                exportXlsUrl: "/tankerRegistration/tankerRegistration/exportXls",
                importExcelUrl: "tankerRegistration/tankerRegistration/importExcel",
                getGPS: "/tankerRegistration/tankerRegistration/getGPS",
                addLog: "/gpsLog/gpsLog/add",
                inCar: "/tankerRegistration/tankerRegistration/inCar",
                outCar: "/tankerRegistration/tankerRegistration/outCar",
                screenshot: "/tankerRegistration/tankerRegistration/screenshot",
            },
            dictOptions: {},
            superFieldList: [],
            gpsShow: false,
            trackArray: {},
            parkArray: [],
            GPSbegin: undefined,
            GPSend: undefined,
            playVideoVisible: false,
            hour: 72,
            image: "",
            registration: {},
            gpsModalLoading: false,
            stepsShow: false,
            current: 0,
            status: 'wait',
        }
    },
    created() {
        this.getSuperFieldList();
        const now = new Date();
        const yesterday = new Date(now.getTime() - 72 * 60 * 60 * 1000);
        this.GPSend = `${now.getFullYear()}-${('0' + (now.getMonth() + 1)).slice(-2)}-${('0' + now.getDate()).slice(-2)}`;
        this.GPSbegin = `${yesterday.getFullYear()}-${('0' + (yesterday.getMonth() + 1)).slice(-2)}-${('0' + yesterday.getDate()).slice(-2)}`;
    },
    computed: {
        importExcelUrl: function () {
            return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
        },
        parkedOverOneHourWithTimes() {
            const oneHourInMinutes = 30;
            return this.parkArray
                .filter(parking => parseInt(parking.parkMins, 10) > oneHourInMinutes)
                .map(parking => ({
                    ...parking,
                    startTime: this.formatTimestamp(parking.parkBte),
                    endTime: this.formatTimestamp(parking.parkEte)
                }));
        }
    },
    methods: {
        showGPS(record) {
            if (!this.GPSbegin) {
                this.$message.error("请选择日期！")
                return
            }
            this.registration = record
            // this.registration.plateNo = "黑MM6244"
            // 准备请求参数
            let url = "https://enviroment.tw-tj.com:2443/NewElefence/GetRoutePath"

            const now = new Date(this.GPSbegin);
            // const yesterday = new Date(now.getTime() - this.hour * 60 * 60 * 1000);
            const tomorrow = new Date(now.getTime() + 72 * 60 * 60 * 1000);

            // const formattedYesterday = `${yesterday.getFullYear()}-${('0' + (yesterday.getMonth() + 1)).slice(-2)}-${('0' + yesterday.getDate()).slice(-2)} 00:00:00`;
            const formattedNow = `${now.getFullYear()}-${('0' + (now.getMonth() + 1)).slice(-2)}-${('0' + now.getDate()).slice(-2)} 00:00:00`;
            const formattedTomorrow = `${tomorrow.getFullYear()}-${('0' + (tomorrow.getMonth() + 1)).slice(-2)}-${('0' + tomorrow.getDate()).slice(-2)} 00:00:00`;

            this.formattedNow = formattedNow
            this.formattedTomorrow = formattedTomorrow
            // 构建请求参数
            const postData = new URLSearchParams({
                plateNo: this.registration.plateNo,
                // plateNo: "蒙G70708",
                begintime: formattedNow,
                endtime: formattedTomorrow,
                plateColor: '2'
            });
            let logResult = "意料之外的失败";
            // 发送POST请求，设置headers为application/x-www-form-urlencoded
            axios.post(url, postData.toString(), {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then(response => {
                const result = response.data.result;
                console.log(response)
                // 检查结果是否为对象
                if (typeof result === 'object' && result !== null) {
                    // 是对象，正常处理数据
                    this.trackArray = result.trackArray;
                    this.parkArray = result.parkArray;
                    this.gpsShow = true;
                    logResult = "成功"
                } else if (result === '无结果') {
                    // 是特定的字符串提示，显示消息并结束
                    this.$message.warning('无查询结果！');
                    logResult = "成功，无查询结果"
                    return
                } else {
                    // 不是预期的情况，可能需要错误处理
                    logResult = "收到了意料之外的数据类型:" + response
                    this.$message.error('数据处理错误，请重试！');
                }
            }).catch(error => {
                this.$message.error('获取定位失败:')
                console.error('获取定位失败:', error);
            }).finally(() => {
                let log = {
                    result: logResult,
                    plate: this.registration.plateNo,
                    // plate: "蒙G70708",
                    timeSlot: formattedNow.substring(0, 10) + "~" + formattedTomorrow.substring(0, 10)
                }
                postAction(this.url.addLog, log)
            })
        },
        formatTimestamp(timestamp) {
            if (timestamp && !isNaN(timestamp)) {
                const date = new Date(parseInt(timestamp, 10));
                return `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}-${('0' + date.getDate()).slice(-2)} ${('0' + date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}`;
            } else {
                return '时间错误';
            }
        },
        allow(record) {
            record.auditStatus = 1
            putAction(this.url.edit, record).then((res) => {
                if (res.success) {
                    this.$message.success("操作成功!")
                    this.loadData()
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        onChange() {
            if (this.auditStatus == 3) {
                this.remarks = true
            } else {
                this.remarks = false
            }
        },
        handleOk() {
            if (!this.auditStatus) {
                this.$message.error("请选择审批结果")
                return
            }
            this.form.auditStatus = this.auditStatus
            postAction(this.url.check, this.form).then(res => {
                if (res.success) {
                    this.$message.success(res.message)
                    this.labelVisible = false
                    this.loadData()
                } else {
                    this.$message.warning(res.message)
                }
            }).catch(res => {
                this.$message.error("审批失败请联系管理员")
            }).finally(() => {
                this.auditStatus = undefined
            })
        },
        labelCancel(e) {
            this.labelVisible = false
        },
        handleCheck(data) {
            this.form = data
            console.log(this.form)
            this.labelVisible = true
        },
        discard(record) {
            record.auditStatus = 12
            putAction(this.url.edit, record).then((res) => {
                if (res.success) {
                    this.$message.success("废弃成功")
                    this.loadData()
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        gpsClose() {
            this.gpsModalLoading = true
            try {
                html2canvas(document.querySelector(".canvasImgObj"), {
                    useCORS: true,  // 开启跨域
                }).then(canvas => {
                    let image = canvas.toDataURL("image/png");
                    this.registration.screenshot = image
                    console.log(this.registration.screenshot)
                    postAction(this.url.screenshot, this.registration).then((res) => {
                        if (res.success) {
                            this.$message.success(res.message)
                            this.gpsShow = false;
                            this.loadData()
                        } else {
                            this.$message.warning(res.message)
                        }
                    }).finally(() => {
                        this.gpsModalLoading = false
                    })
                })
            } catch (e) {
                throw new Error(e);
            }
        },
        showSteps(record) {
            let auditStatus = record.auditStatus
            let entryStatus = record.entryStatus
            switch (auditStatus) {
                case 1:
                    this.current = 0
                    this.status = 'process'
                    break
                case 2:
                    this.current = entryStatus == 1 ? 4 : 5
                    this.status = 'process'
                    break
                case 3:
                    this.current = 3
                    this.status = 'error'
                    break
                case 4:
                    this.current = 1
                    this.status = 'process'
                    break
                case 5:
                    this.current = 1
                    this.status = 'process'
                    break
                case 6:
                    this.current = 1
                    this.status = 'process'
                    break
                case 7:
                    this.current = entryStatus == 1 ? 4 : 5
                    this.status = 'process'
                    break
                case 8:
                    this.current = 7
                    this.status = 'process'
                    break
                case 9:
                    this.current = 8
                    this.status = 'error'
                    break
                case 10:
                    this.current = 6
                    this.status = 'process'
                    break
                case 11:
                    this.current = 9
                    this.status = 'process'
                    break
                case 15:
                    this.current = 2
                    this.status = 'process'
                    break
                case 16:
                    this.current = entryStatus == 3 ? 11 : 10
                    this.status = 'process'
                    break
            }
            this.stepsShow = true
        },
        playVideo(text) {
            this.videoSrc = text
            console.log('this.videoSrc==========>', this.getImgView(this.videoSrc))
            this.playVideoVisible = true
        },
        disposeVideo() {
            this.$refs.videoPlayer.pause();
        },
        initDictConfig() {
        },
        getSuperFieldList() {
            let fieldList = [];
            fieldList.push({ type: 'string', value: 'plateNo', text: '车牌号', dictCode: '' })
            fieldList.push({ type: 'string', value: 'driverName', text: '司机姓名', dictCode: '' })
            fieldList.push({ type: 'string', value: 'phoneNum', text: '手机号', dictCode: '' })
            fieldList.push({ type: 'string', value: 'fleet', text: '车队', dictCode: '' })
            fieldList.push({ type: 'int', value: 'isEdibleOilLabel', text: '是否有食用油专用标签', dictCode: '' })
            fieldList.push({ type: 'string', value: 'lastTimeUnloadingLocation', text: '上次卸货地点', dictCode: '' })
            fieldList.push({ type: 'string', value: 'lastTimeUnloadingCompanyName', text: '上次装卸货公司名称', dictCode: '' })
            fieldList.push({ type: 'string', value: 'lastTimeUnloadingGoodsName', text: '上次装车货品名称', dictCode: '' })
            fieldList.push({ type: 'datetime', value: 'lastTimeUnloadingDate', text: '上次装卸货日期时间' })
            fieldList.push({ type: 'string', value: 'lastTimeUnloadingPhotos', text: '上次卸货照片', dictCode: '' })
            fieldList.push({ type: 'datetime', value: 'lastTimeCleaningDate', text: '上次清洗时间' })
            fieldList.push({ type: 'string', value: 'lastTimeCleaningPhotos', text: '上次清洗照片', dictCode: '' })
            fieldList.push({ type: 'int', value: 'auditStatus', text: '审核状态', dictCode: '' })
            fieldList.push({ type: 'int', value: 'entryStatus', text: '入场状态', dictCode: '' })
            fieldList.push({ type: 'datetime', value: 'entryTime', text: '入场时间' })
            fieldList.push({ type: 'string', value: 'entryPic', text: '入场照片', dictCode: '' })
            fieldList.push({ type: 'datetime', value: 'exitTime', text: '出场时间' })
            fieldList.push({ type: 'string', value: 'exitPic', text: '出场照片', dictCode: '' })
            fieldList.push({ type: 'string', value: 'vehicle45Photo', text: '车辆正面斜45度照片', dictCode: '' })
            fieldList.push({ type: 'string', value: 'tankPhoto', text: '罐内照片', dictCode: '' })
            fieldList.push({ type: 'string', value: 'oilDischargePortPhoto', text: '卸油口照片', dictCode: '' })
            fieldList.push({ type: 'int', value: 'isOdor', text: '是否异味 ', dictCode: '' })
            fieldList.push({ type: 'datetime', value: 'auditDate', text: '审核时间' })
            fieldList.push({ type: 'string', value: 'surveyorName', text: '检验人员姓名', dictCode: '' })
            fieldList.push({ type: 'datetime', value: 'surveyorDate', text: '检验时间' })
            this.superFieldList = fieldList
        },
        inCar(record) {
            postAction(this.url.inCar, record).then((res) => {
                if (res.success) {
                    this.$message.success(res.message)
                    this.loadData()
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        outCar(record) {
            postAction(this.url.outCar, record).then((res) => {
                if (res.success) {
                    this.$message.success(res.message)
                    this.loadData()
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
    }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>